<template>
	<view>
		<piaoyi-data-search @onSearch="onSearch" @onItemClick="onItemClick" :finish="finish" :label="label" :value="value" :option.sync="option"></piaoyi-data-search>
		
		<u-loading mode="flower" :show="loading"></u-loading>
		
		<view class="" v-if="orderDetail != ''">
			<view class="" v-for="item in orderDetail" :key="item.id">
				<view class="order" @click="goOrderDetail(item.id)">
					<view class="order-code">
						订单号: {{item.code}}
					</view>
					<view class="order-top">
						<view class="top-left">
							<view v-if="item.soure == 'hire'" class="">
								车辆凭租
							</view>
							<view v-else="item.soure == 'clear'" class="">
								汽车美容
							</view>
						</view>
						<view class="top-right" style="color: greenyellow;">
							{{item.status | orderStatus}}
						</view>
					</view>
					<view class="order-content" v-if="item.soure == 'clear'">
						<view class="content-left">
							<image :src="item.carwash.image" mode=""></image>
						</view>
						<view class="content-right">
							<view class="right-top">
								服务内容:{{item.content}}
							</view>
							<view class="right-car">
								服务门店: {{item.storename_text}}
							</view>
						</view>
					</view>
					<view class="order-content" v-else="item.soure == 'hire'">
						<view class="content-left">
							<image :src="item.hire.thumbs_text[0]" mode=""></image>
						</view>
						<view class="content-right">
							<view class="right-top">
								{{item.cardname}}
							</view>
							<view class="right-car">
								{{item.hire.gearbox}}/{{item.hire.fuel}}/{{item.hire.emission}}//{{item.hire.seat}}
							</view>
							<view class="right-price">
								￥{{item.hire.price}}
							</view>
						</view>
					</view>
					<view class="order-free">
						实付款: ￥{{item.amount}}
					</view>
				</view>
			</view>
		</view>
		
		<view class="empty" v-if="orderDetail == ''">
			<u-empty text="没有找到订单噢!" mode="order"></u-empty>
		</view>
	</view>
</template>

<script>
	import piaoyiDataSearch from '../../components/piaoyi-data-search/piaoyi-data-search.vue'
	export default {
		components: {
			piaoyiDataSearch
		},
		data() {
			return {
				userInfo: [],
				keyword: '',
				orderDetail: [],
				order: false,
				loading: false,
				option: [],
				label: 'text',
				value: 'value',
				finish: false
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userData');
		},
		methods: {
			onSearch(keyword) {
			    this.finish = false
			    // let ramdom = Math.random()
			    // if (ramdom > 0.5) {
			    //     this.option = [{
			    //         text: '搜索1',
			    //         value: '搜索1'
			    //     }, {
			    //         text: '搜索2',
			    //         value: '搜索2'
			    //     }, {
			    //         text: '搜索2',
			    //         value: '搜索2'
			    //     }, {
			    //         text: '搜索3',
			    //         value: '搜索3'
			    //     }, {
			    //         text: '搜索4',
			    //         value: '搜索4'
			    //     }, {
			    //         text: '搜索5',
			    //         value: '搜索5'
			    //     }, {
			    //         text: '搜索6',
			    //         value: '搜索6'
			    //     }, {
			    //         text: '搜索7',
			    //         value: '搜索7'
			    //     }]
			    // } else {
			    //     this.option = JSON.parse(JSON.stringify([]))
			    // }
				uni.request({
					url: uni.getStorageSync('URL') + 'home/order/order/orderSearch',
					method: 'POST',
					data: {
						busid: this.userInfo.id,
						value: keyword
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res)=> {
						if(res.statusCode === 200){
							this.orderDetail = res.data.data
							setTimeout(() => {
							    this.finish = false
							}, 1000)
						}
					}
				})
			},
			onItemClick(item){
			    uni.showToast({
			        title: JSON.stringify(item),
			        icon: 'none'
			    })
			},
			goOrderDetail(id) {
				uni.navigateTo({
					url: '/pagesC/order/orderDetail?id='+ id
				})
			}
		},
		filters: {
			orderStatus: function(str) {// 格式化
				const status = {
					"10": "订单已确认,等待进行中",
					"9": "订单已取消",
					"8": "退款已拒绝",
					"7": "订单已退款",
					"6": "订单待退款",
					"5": "订单已评价",
					"4": "订单已完成",
					"3": "订单进行中",
					"2": "订单已支付,等待处理中",
					"1": "订单未支付",
					"0": ""
				}
				return status[str];
			}
		}
	}
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.order {
	margin: 20rpx auto;
	background-color: #ffffff;
	height: 430rpx;
	width: 90%;
	border-radius: 30rpx;
	// border: 1rpx solid;
	.order-code {
		padding: 20rpx;
	}
	.order-top {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
		padding: 15rpx;
	}
	.order-content {
		padding: 10rpx;
		display: flex;
		height: 200rpx;
		.content-left {
			width: 40%;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.content-right {
			padding: 10rpx;
			width: 60%;
			.right-top {
				font-size: 1.25rem;
			}
			.right-car {
				color: #adadad;
				margin-top: 10rpx;
			}
			.right-price {
				margin-top: 10rpx;
			}
		}
	}
	.order-free {
		width: 100%;
		font-size: 30rpx;
		text-align: right;
		padding: 10rpx;
		color: crimson;
	}
	.order-button {
		width: 25%;
		margin-left: auto;
		padding: 10rpx;
	}
}
.empty {
	margin-top: 100rpx;
}
</style>
